<template>
	<view class="page">
		<u-navbar title="收银台" :autoBack="true" :placeholder="true">
		</u-navbar>
		<view class="main">
			<view class="bigBox">
				<view class="top">
					<view class="amount">支付金额</view>
					<view class="price">￥{{ comprice }}</view>
				</view>
				<view class="payoption">选择支付方式</view>
				<view class="middle">

					<view class="middle1">
						<u--image height=3.5rem width=3.5rem
							src="http://182.61.31.180:5000/images/1655711045371_支付宝logo.png"></u--image>
					</view>
					<view class="buju">
						<view class="title">
							<span class="zifubao">支付宝</span>
							<u--image class="tuijian" height=1rem width=2rem
								src="http://182.61.31.180:5000/images/1655711663879_推荐.png"></u--image>
						</view>
						<view class="shiyi">
							<span>10亿人都在用，真安全，更方便</span>
						</view>
					</view>
					<view class="checkbox">
						<checkbox :checked="isChecked" @click="isChecked = !isChecked"></checkbox>
					</view>
				</view>
				<view class="bottom">
					<u-button @click="payok" class="btn">支付宝支付{{ comprice }}</u-button>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
import { payment } from '@/Api/payment'
export default {
	data() {
		return {
			isChecked: true,
			back: false
		}
	},
	onShow() {
		if (this.back)
			this.$Router.push({
				name: 'payok'
			})
	},
	computed: {
		price() {
			return this.$store.state.order.curOrder.price
		},
		comprice() {
			return parseFloat(this.price).toFixed(2)
		},
		order() {
			return this.$store.state.order.curOrder
		}
	},
	methods: {

		payok() {
			if (!this.isChecked) {
				this.$tools.toast("请选择支付方式")
				return;
			}

			let data = {
				orderId: this.order.orderId,
				price: this.price,
				bookTitle: this.order.bookTitle
			}
			// var EnvUtils = plus.android.importClass("com.alipay.sdk.app.EnvUtils");
			// EnvUtils.setEnv(EnvUtils.EnvEnum.SANDBOX);
			// DEMO
			// 获取jyAlipay对象
			// const jyAliPay = uni.requireNativePlugin('JY-ALIPAY')
			// jyAliPay.show({ // 发起支付
			// 	if_sanbox: true,
			// 	auto_create_order_info: false,
			// 	appid: '2021000120698303',
			// 	rsa2_private: "MIIEpAIBAAKCAQEAvDfEjX4lLijUJYF/0bvXgm1xbq9udivE9MqRu3pFElpesfEDQ4QwcTGK2ZnyzBgNE+dpAnU756GR/TIB8+Vqtssf60otxXNj0HkaM29kJA/ONLs7ylfchhD5teLtli9ETAAx/LNu4QC0cX1BP5XQ9jnnc4/fNTQTvtIQVpjnD9KGqYF/9XesXGocWNXo1erA7E2w4wKrm4n2s7hEgw+9aOthzhP8hR5uz/qPOZGOEy4RXoI3XNhv0oIUlEbFrGh1DwSrjjQfTPHFKucyWZ8MYuuo928HI6sC5LTFdkcwLd6mSdHnQsXHeHQpOrWfBIpO1XpPPk1lzEO4irAnPBjp+wIDAQABAoIBAQCwz36wIKlSxH4OQanOX7RizOb7QIf3MMTT5JukT4clZ4l/hVY4jaxoGU9DfVBNk+ZtJT1LVtAQl4IqJVkaQhDOaOCySrvWucAxbiJD4UdkbQicFqtjOMhrlPTPfb8ND5gMAT70Ead+bQgVeMHbtqRXOiwILkZTl3lZD8LTZs3g2Jhj1vfGkhZZDvaPxXTHEgNFlb8D6r5qYmJ7By/kyikBr9j10NbPQcDUQinbweyk1usBLJCsdu8SXacSXFwNhSukWqXw4OzjiaPv3sbmi3datZZUINK//ZIvsVaX4nEnlKNowGDENdVYtKJ3+SubxkqSrUtJ9v+xHGSa/3eQOaSRAoGBAPRzMsRJikd/G92BW6camBtfucsB+ZwIFEPMNZn0M6MeaQaCZ4mYj/WJtWBm7+0K+b9Lb49b7KupmzqUTkmF70YvOGguzURWa1QnB5nQQR+VTrgt7yeH1dd/A/dJe8arLMypLJGY7cFvqr7TXzXPqoYOani+deatphDB98dEM0TpAoGBAMUcZoLluQnR5w2Gx3fdgADC1XythTcXRpdRK/0ejPCKBKJ8Sb4zHWQUfx1TS6XrPom4IFmRNU1JscyhlfvP2DKMQiFm7s8Rj0NhfyONa2xH1NByHTmEq46/h9qqUXbZlvJRPMlt/PVnRhcmUTGz+W0vVWei6CBsnonCm3s35jlDAoGBAL/ZpY9OFDu2s7ztqGwGwDhDscJ1I1zlLlpja/IPKXOtC0pzkCT6WomfcX1ebJECmy4aW00NHTtA2rZn7OVhO4A+0StbB/jJRmT+WMXMH0BVYznDuz2wKxF8+zTaNE2gzIE3iOYgOwEkzcIEjGXkPPYHXGK1QD0yLfJa+Ucn7ID5AoGAI4CGBjWSKm6gCxOngbNnhruQ8C/gupd6o25/WcvS3tA9HXb9YUCbnpcCfimuimfgj7WWPgulahJH7+96sCwzaIdSsel0Qd+LyjsZRzIFky8s6Y5kLSP0MnXU5lGe8qUmRubS6ATjdt/vA+Rm42jjGANagpwY6x4lP/LJRlw/HzkCgYAA5iSNRj4pfVbEw9iwRgZ4gty4VTaYItK92xUAJx4SALKCPtBnHhww6933J2y7kDmuVGi1LEl0wdQTsxmDF9fhHuaOcts/ecsRmp0AbfInBpjICdpDD1xDI/cfkPAehCOwA0CCiU8n3TK/CoWG7qmx2OUs/y7CgcTiUQHm2eNNvQ==",
			// 	order_info: res.url
			// }, function (result) { // 支付完成回调
			// 	console.log(result)
			// 	if (result.resultStatus == '5002555') {
			// 		that.vusui.msg('支付sdk出错')
			// 	} else if (result.resultStatus == '9000') {
			// 		that.vusui.msg('支付成功')
			// 	} else {
			// 		that.vusui.msg(result.memo)
			// 	}
			// });

			payment(data).then(res => {
				plus.runtime.openURL(res.data.url)
				this.back = true	

			})


		}
	}
}
</script>

<style lang="scss" scoped>
.main {
	height: 100%;

	.bigBox {
		height: 100%;

		// background-color: red;
		.bottom {

			position: fixed;
			bottom: 1rem;
			left: 1rem;
			width: 90%;
			border-radius: 1rem;
			display: flex;
			align-items: center;

			.btn {
				color: white;
				background: #007aff;
			}
		}

		.top {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 2rem;

			.amount {
				color: #ccc;
			}

			.price {
				font-size: 2rem;
			}
		}

		.payoption {
			margin-left: 1rem;
			margin-right: 1rem;
			border-bottom: 0.5px solid #ccc;
			font-size: 1.2rem;
			margin-top: 2rem;
		}

		.middle {

			width: 100%;
			display: flex;
			justify-content: space-around;
			margin-top: 0.5rem;

			.middle1 {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 1rem;
				margin-left: 1rem;
			}

			.title {

				margin-top: 1rem;
				margin-left: 0.5rem;
				display: flex;
				flex-direction: row;
				align-items: center;

				.tuijian {
					margin-left: 0.5rem;
				}

				.zifubao {
					font-size: 1.5rem;
				}
			}

			.shiyi {
				margin-top: 0.5rem;
				margin-left: 0.5rem;
			}

			.checkbox {
				width: 9%;
				margin-top: 1rem;
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}
		}
	}
}
</style>
